{% from 'bootstrap/nav.html' import render_nav_item %}

<!DOCTYPE html>
<html lang="en">
<head>
    {% block head %}
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>{% block title %}{% endblock title %} - {{ _('Bluelog') }}</title>
        <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}">
        <link rel="stylesheet" href="{{ url_for('static', filename='css/%s.min.css' % request.cookies.get('theme', 'perfect_blue')) }}" type="text/css">
        <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}" type="text/css">
    {% endblock %}
</head>
<body>
    {% block nav %}
        <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
            <div class="container">
                <a href="/" class="navbar-brand">{{ _('Bluelog') }}</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01"
                        aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarColor01">
                    <ul class="navbar-nav mr-auto">
                        {{ render_nav_item('blog.index', _('Home')) }}
                        {{ render_nav_item('blog.about', _('About')) }}
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li class="nav-item dropdown">
                            <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                                {{ _('Theme') }} <span class="caret"></span>
                            </a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                {% for theme_name, display_name in config.BLUELOG_THEMES.items() %}
                                    <a href="{{ url_for('blog.change_theme', theme_name=theme_name, next=request.full_path) }}" class="dropdown-item">
                                        {{ display_name }}
                                    </a>
                                {% endfor %}
                            </div>
                        </li>
                        {% if current_user.is_authenticated %}
                        <li class="nav-item dropdown">
                            <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                                {{ _('New') }} <span class="caret"></span>
                            </a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                <a href="{{ url_for('admin.new_post') }}" class="dropdown-item">{{ _('Post') }}</a>
                                <a href="{{ url_for('admin.new_category') }}" class="dropdown-item">{{ _('Category') }}</a>
                            </div>
                        </li>
                        <li class="nav-item dropdown">
                            <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                                {{ _('Manage') }} <span class="caret"></span>
                                {% if unread_comments %}
                                    <span class="badge badge-success">new</span>
                                {% endif %}
                            </a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                <a href="{{ url_for('admin.manage_post') }}" class="dropdown-item">{{ _('Post') }}</a>
                                <a href="{{ url_for('admin.manage_category') }}" class="dropdown-item">{{ _('Category') }}</a>
                                <a href="{{ url_for('admin.manage_comment') }}" class="dropdown-item">
                                    {{ _('Comment') }}
                                    {% if unread_comments %}
                                        <span class="badge badge-success">{{ unread_comments }}</span>
                                    {% endif %}
                                </a>
                            </div>
                        </li>
                        {{ render_nav_item('admin.settings', _('Settings')) }}
                        {% endif %}
                    </ul>
                </div>
            </div>
        </nav>
    {% endblock nav %}

    <main class="container">
        {% for message in get_flashed_messages(with_categories=True) %}
            <div class="alert alert-{{ message[0] }}" role="alert">
                <button class="close" type="button" data-dismiss="alert">&times;</button>
                {{ message[1] }}
            </div>
        {% endfor %}

        {% block content %}{% endblock content %}
        {% block footer %}
            <footer>
                <p class="float-left">
                    <small> &copy; 2019 <a href="https://github.com/superwongo" title="Written by Super Wong">Super Wong</a> -
                        <a href="https://github.com/superwongo/bluelog" title="Fork me on GitHub">GitHub</a> -
                        <a href="http://helloflask.com" title="A HelloFlask project">HelloFlask</a>
                    </small>
                </p>
                <p class="float-right">
                    <small>
                        {% if current_user.is_authenticated %}
                            <a href="{{ url_for('auth.logout', next=request.full_path) }}">{{ _('Logout') }}</a>
                        {% else %}
                            <a href="{{ url_for('auth.login', next=request.full_path) }}">{{ _('Login') }}</a>
                        {% endif %}
                    </small>
                </p>
            </footer>
        {% endblock footer %}
    </main>

    {% block scripts %}
        <script type="text/javascript" src="{{ url_for('static', filename='js/jquery-3.2.1.slim.min.js') }}"></script>
        <script type="text/javascript" src="{{ url_for('static', filename='js/popper.min.js') }}"></script>
        <script type="text/javascript" src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
        <script type="text/javascript" src="{{ url_for('static', filename='js/script.js') }}"></script>
        {{ moment.include_moment(local_js=url_for('static', filename='js/moment-with-locales.min.js')) }}
        {{ moment.lang(g.locale) }}
    {% endblock %}
</body>
</html>